<template>
    <div class="dashboard">
        <el-row :gutter="20">
            <el-col :span="12">
                <el-card shadow="always">
                    <div slot="header" class="clearfix">
                        <span>员工人数</span>
                    </div>
                    <!-- 员工人数 -->
                    <div id="main" class="chart-container"></div>
                </el-card>
            </el-col>
            <el-col :span="12">

                <el-card>
                    <!-- 宿舍入住率 -->
                    <div slot="header" class="clearfix">
                        <span>宿舍入住率</span>
                    </div>
                    <div id="mainRoom" class="chart-container"></div>
                </el-card>
            </el-col>
        </el-row>
        <el-row :gutter="20" style="margin-top: 10px;">
            <el-col :span="12">
                <el-card>
                    <div slot="header" class="clearfix">
                        <span>员工概览</span>
                    </div>
                    <!-- 总人数，总需要住宿人数，未安排住宿人数 -->
                    <div id="main3" class="chart-container"></div>
                </el-card>
            </el-col>
            <el-col :span="12">

                <el-card>
                    <!-- 用电量统计 -->
                    <div slot="header" class="clearfix">
                        <span>用电量统计</span>
                    </div>
                    <div id="main4" class="chart-container"></div>
                </el-card>
            </el-col>
        </el-row>
        <el-row :gutter="20" style="margin-top: 10px;">
            <el-col :span="24">
                <el-card>
                    <div slot="header" class="clearfix">
                        <span>未抄表宿舍</span>
                    </div>
                    <!-- 未抄表宿舍图 -->
                    <dv-scroll-board :config="config" style="width:100%;height:400px" />
                    <!-- <div id="main5" style="height: 500px;"></div> -->
                </el-card>
            </el-col>

        </el-row>
    </div>
</template>
  
<script>
import * as echarts from 'echarts';
import { getData } from "@/api/business/index";

export default {
    name: 'Dashboard',
    data() {
        return {
            loading: false,
            //员工人数
            data1: [],
            //宿舍入住率
            ruzhuRate: 0,
            initData3: {
                allCount: 0,
                haveCount: 0,
                notCount: 0,
                assignedaccommodationoutsourceyes: 0,//已分配的外包人员数
                assignedaccommodationoutsourceno: 0,//已分配的本厂人员数
                unassignedaccommodationoutsourceyes: 0,//未分配的外包人员数
                unassignedaccommodationoutsourceno: 0,//未分配的本厂人员数
                alloutsourceno: 0,//总的本厂人员数
                alloutsourceyes: 0,//总的外包数据
            },
            useDegreesArray: [],
            config: {
                header: ['楼栋', '楼层', '宿舍', '最后抄表时间'],
                data: [
                ],
                index: true,
                //columnWidth: [50, 170, 300],
                align: ['center'],
                rowNum: 7,
                headerBGC: '#1981f6',
                headerHeight: 45,
                oddRowBGC: 'rgba(0, 44, 81, 0.8)',
                evenRowBGC: 'rgba(10, 29, 50, 0.8)'
            }
        }
    },
    // 添加需要使用的Element UI组件
    mounted() {
        // 在mounted钩子函数中初始化图表
        this.getData();



        // this.init5();

    },
    created() {

        // this.getData();
    },
    methods: {
        getData() {
            this.loading = true;
            getData().then(response => {
                //console.log(response)
                this.data1 = response.EmployeeClassification;
                this.ruzhuRate = response.ruzhuRate;
                this.initData3 = response.initData3;
                this.useDegreesArray = response.useDegreesArray;
                //this.config.data = response.NoCheckDegreeDormitoryList;
                this.config = { data:response.NoCheckDegreeDormitoryList,  header: ['楼栋', '楼层', '宿舍', '最后抄表时间'], index: true,
                //columnWidth: [50, 170, 300],
                align: ['center'],
                rowNum: 7,
                headerBGC: '#1981f6',
                headerHeight: 35,
                oddRowBGC: 'rgba(0, 44, 81, 0.8)',
                evenRowBGC: 'rgba(10, 29, 50, 0.8)',
                carousel: 'page'}
                this.initChart();
                this.initRoom();
                this.init3();
                this.init4();
                this.loading = false;
            });
        },
        initChart() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
            var option;
            option = {
                title: {
                    text: '',
                    subtext: '外包占比图',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                        name: '员工数',
                        type: 'pie',
                        radius: '50%',
                        data: this.data1,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };

            option && myChart.setOption(option);
        },
        //房间入住率
        initRoom() {
            var chartDom = document.getElementById('mainRoom');
            var myChart = echarts.init(chartDom);
            var option;
            option = {
                series: [
                    {
                        type: 'gauge',
                        progress: {
                            show: true,
                            width: 18
                        },
                        axisLine: {
                            lineStyle: {
                                width: 18
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            length: 15,
                            lineStyle: {
                                width: 2,
                                color: '#999'
                            }
                        },
                        axisLabel: {
                            distance: 25,
                            color: '#999',
                            fontSize: 12
                        },
                        anchor: {
                            show: true,
                            showAbove: true,
                            size: 25,
                            itemStyle: {
                                borderWidth: 10
                            }
                        },
                        title: {
                            show: false
                        },
                        detail: {
                            valueAnimation: true,
                            fontSize: 25,
                            offsetCenter: [0, '70%']
                        },
                        data: [
                            {
                                value: this.ruzhuRate.toFixed(2),

                            }
                        ]
                    }
                ]
            };

            option && myChart.setOption(option);
        },
        //申请住房人，已住房，未住房
        init3() {
            var chartDom = document.getElementById('main3');
            var myChart = echarts.init(chartDom);
            var option;

            option = {
                tooltip: {
                    show: true
                },
                xAxis: {
                    data: ['总申请人', '入住人', '未安排']
                },
                yAxis: {},
                dataGroupId: '',
                animationDurationUpdate: 500,
                series: {
                    type: 'bar',
                    id: 'sales',
                    data: [
                        {
                            value: this.initData3.allCount,
                            groupId: '总申请人',
                            itemStyle: {
                                color: '#FFCA28' // 设置未安排柱子的颜色
                            }
                        },
                        {
                            value: this.initData3.haveCount,
                            groupId: '入住人',
                            itemStyle: {
                                color: '#64B5F6' // 设置入住人柱子的颜色
                            }
                        },
                        {
                            value: this.initData3.notCount,
                            groupId: '未安排',
                            itemStyle: {

                                color: '#FF7070' // 设置总人数柱子的颜色
                            }
                        }
                    ],
                    universalTransition: {
                        enabled: true,
                        divideShape: 'clone'
                    }
                }
            };
            const drilldownData = [
                {
                    dataGroupId: '总申请人',
                    data: [
                        ['本厂', this.initData3.alloutsourceno],
                        ['外包', this.initData3.alloutsourceyes],

                    ]
                },
                {
                    dataGroupId: '入住人',
                    data: [
                        ['本厂', this.initData3.assignedaccommodationoutsourceno],
                        ['外包', this.initData3.assignedaccommodationoutsourceyes]
                    ]
                },
                {
                    dataGroupId: '未安排',
                    data: [
                        ['本厂', this.initData3.unassignedaccommodationoutsourceno],
                        ['外包', this.initData3.unassignedaccommodationoutsourceyes],

                    ]
                }
            ];
            myChart.on('click', function (event) {
                if (event.data) {
                    var subData = drilldownData.find(function (data) {
                        return data.dataGroupId === event.data.groupId;
                    });
                    if (!subData) {
                        return;
                    }
                    myChart.setOption({
                        xAxis: {
                            data: subData.data.map(function (item) {
                                return item[0];
                            })
                        },
                        series: {
                            type: 'bar',
                            id: 'sales',
                            dataGroupId: subData.dataGroupId,
                            data: subData.data.map(function (item) {
                                return item[1];
                            }),
                            universalTransition: {
                                enabled: true,
                                divideShape: 'clone'
                            }
                        },
                        graphic: [
                            {
                                type: 'text',
                                left: 50,
                                top: 20,
                                style: {
                                    text: '返回',
                                    fontSize: 18
                                },
                                onclick: function () {
                                    myChart.setOption(option);
                                }
                            }
                        ]
                    });
                }
            });

            option && myChart.setOption(option);
        },
        //用电统计
        init4() {
            var chartDom = document.getElementById('main4');
            var myChart = echarts.init(chartDom);
            var option;

            option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },
                // toolbox: {
                //     feature: {
                //         dataView: { show: true, readOnly: false },
                //         magicType: { show: true, type: ['line', 'bar'] },
                //         restore: { show: true },
                //         saveAsImage: { show: true }
                //     }
                // },
                legend: {
                    data: ['用电量', '趋势']
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
                        axisPointer: {
                            type: 'shadow'
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '用电量',
                    },
                    {
                        type: 'value',
                        name: '趋势',
                    }
                ],
                series: [

                    {
                        name: '用电量',
                        type: 'bar',
                        tooltip: {
                            valueFormatter: function (value) {
                                return value + ' 度';
                            }
                        },
                        itemStyle: {
                            color: '#33D76A' // 设置未安排柱子的颜色
                        },
                        data: this.useDegreesArray
                    },
                    {
                        name: '趋势',
                        type: 'line',
                        yAxisIndex: 1,
                        tooltip: {
                            valueFormatter: function (value) {
                                return value + ' 度';
                            }
                        },
                        data: this.useDegreesArray
                    }
                ]
            };

            option && myChart.setOption(option);
        },
        init5() {
            var ROOT_PATH = 'https://echarts.apache.org/examples';

            var chartDom = document.getElementById('main5');
            var myChart = echarts.init(chartDom);
            var option;
            var data = {
                "name": "",
                "children": [
                    {
                        "name": "1号楼",
                        "children": [
                            {
                                "name": "201",
                                "value": "未抄表"
                            },
                            {
                                "name": "203",

                            },
                            {
                                "name": "302",

                            }
                        ]
                    },
                    {
                        "name": "2号楼",
                        "children": [
                            {
                                "name": "201",
                                "value": "未抄表"
                            },
                            {
                                "name": "203",

                            },
                            {
                                "name": "302",

                            }
                        ]
                    },
                    {
                        "name": "3号楼",
                        "children": [
                            {
                                "name": "201",
                                "value": "未抄表"
                            },
                            {
                                "name": "203",

                            },
                            {
                                "name": "302",

                            }
                        ]
                    },
                    {
                        "name": "4号楼",
                        "children": [
                            {
                                "name": "201",
                                "value": "未抄表"
                            },
                            {
                                "name": "203",

                            },
                            {
                                "name": "302",

                            }
                        ]
                    },
                    {
                        "name": "5号楼",
                        "children": [
                            {
                                "name": "201",
                                "value": "未抄表"
                            },
                            {
                                "name": "203",

                            },
                            {
                                "name": "302",

                            }
                        ]
                    },




                ]
            };


            // data.children.forEach(function (datum, index) {
            //     index % 2 === 0 && (datum.collapsed = true);
            // });
            myChart.setOption(
                (option = {
                    tooltip: {
                        trigger: 'item',
                        triggerOn: 'mousemove'
                    },
                    series: [
                        {
                            type: 'tree',
                            data: [data],
                            top: '1%',
                            left: '7%',
                            bottom: '1%',
                            right: '20%',
                            symbolSize: 7,
                            label: {
                                position: 'left',
                                verticalAlign: 'middle',
                                align: 'right',
                                fontSize: 9
                            },
                            leaves: {
                                label: {
                                    position: 'right',
                                    verticalAlign: 'middle',
                                    align: 'left'
                                }
                            },
                            emphasis: {
                                focus: 'descendant'
                            },
                            expandAndCollapse: true,
                            animationDuration: 550,
                            animationDurationUpdate: 750
                        }
                    ]
                })
            );


            option && myChart.setOption(option);

        }
    }
}
</script>

  
<style>
.dashboard {
    padding: 20px;
}


.chart-container {
    height: 300px;
    /* 设置图表容器元素的高度为父容器的100% */
}
</style>
  